/******************** 变量 ********************/
$lv-wizard-text: $text-color;
$lv-wizard-text-wait: $text-color-secondary;
$lv-wizard-text-progress: $primary-color;
$lv-wizard-text-light: $text-color;
$lv-wizard-text-error: $text-color-error;
$lv-wizard-text-hover: $primary-color;
$lv-wizard-description: $text-color-secondary;
$lv-wizard-step-error-icon-color: #ffffff;

$lv-wizard-error-background-color: $status-color-error !default;
$lv-wizard-wait-background-color: $progress-background !default;
$lv-wizard-process-background-color: $primary-color !default;
$lv-wizard-finish-background-color: $primary-color !default;

$lv-wizard-light-text: #1a1a1a;
$lv-wizard-light-text-wait: #4d4d4d;
$lv-wizard-light-text-progress: #2673e5;
$lv-wizard-light-text-light: #1a1a1a;
$lv-wizard-light-text-error: #c63939;
$lv-wizard-light-description: #4d4d4d;

$lv-wizard-light-error-background-color: #c63939 !default;
$lv-wizard-light-wait-background-color: #e6e6e6 !default;
$lv-wizard-light-process-background-color: #2673e5 !default;
$lv-wizard-light-finish-background-color: #2673e5 !default;
$lv-wizard-light-step-number-color: #ffffff;
$lv-wizard-light-step-error-icon-color: #ffffff;

$lv-wizard-dark-text: #e6e6e6;
$lv-wizard-dark-text-wait: #b3b3b3;
$lv-wizard-dark-text-progress: #3388ff;
$lv-wizard-dark-text-light: #e6e6e6;
$lv-wizard-dark-text-error: #f24e4e;
$lv-wizard-dark-description: #b3b3b3;

$lv-wizard-dark-error-background-color: #f24e4e !default;
$lv-wizard-dark-wait-background-color: #4d4d4d !default;
$lv-wizard-dark-process-background-color: #3388ff !default;
$lv-wizard-dark-finish-background-color: #3388ff !default;
$lv-wizard-dark-step-number-color: #808080;
$lv-wizard-dark-step-error-icon-color: #1a1a1a;

$lv-wizard-shape-size: 0.2rem;

/******************** mixin ********************/
@mixin wizard-icon-size {
  width: 0.2rem;
  height: 0.2rem;
}

/******************** 组件 ********************/
.lv-wizard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  color: $lv-wizard-text;
  font-size: $font-size-base;
  line-height: $line-height-base;

  .lv-wizard-step-label {
    position: relative;
    flex: 1 1;

    &:last-of-type {
      flex-grow: 0;
    }

    .lv-wizard-label {
      margin-top: 0.02rem;
      color: $lv-wizard-text-wait;
      text-align: left;

      @include motion-state;
    }

    .lv-wizard-description {
      font-size: 0.12rem;
      color: $lv-wizard-description;
    }
  }

  .lv-wizard-step {
    display: flex;
    flex: 1 1 auto;

    .lv-wizard-shape {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      height: $lv-wizard-shape-size;

      > .lv-wizard-step-number,
      > .lv-wizard-step-icon {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        color: $wizard-step-number-color;
        line-height: 0.2rem;
        background: $lv-wizard-wait-background-color;
        border-radius: $border-radius-circle;

        @include wizard-icon-size;
      }

      > .lv-wizard-step-icon {
        em.lv-wizard-step-default-icon {
          display: block;
          width: 0.08rem;
          height: 0.08rem;
          background: $wizard-step-number-color;
          border-radius: $border-radius-circle;
        }

        i {
          @include wizard-icon-size;

          &.lv-step-error-icon {
            color: $lv-wizard-step-error-icon-color; // 错误图标颜色固定
          }
        }
      }

      > .lv-wizard-custom-shape {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;

        .lv-wizard-dot-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.2rem;
          height: 0.21rem;
          flex-shrink: 0;
          color: $lv-wizard-wait-background-color;
        }
      }
    }

    &.lv-wizard-step-process {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          color: $wizard-step-number-process-color;
          background: $lv-wizard-process-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-text-progress;
        font-weight: $font-weight-bold;
      }

      .lv-icon-loading {
        @include icon-size;
      }
    }

    &.lv-wizard-step-finish {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          color: $wizard-step-number-finish-color;
          background: $lv-wizard-finish-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-text;
      }
    }

    &.lv-wizard-step-error {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-error-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-text-error;
      }
    }
  }

  .lv-wizard-line {
    flex: 1 1 auto;
    height: 0.01rem;
    margin-top: 0.1rem;
    margin-right: $margin-sm;
    margin-left: $margin-sm;
    background: $lv-wizard-wait-background-color;

    &.lv-wizard-line-process {
      background: $lv-wizard-process-background-color;
    }

    &.lv-wizard-line-finish {
      background: $lv-wizard-finish-background-color;
    }

    &.lv-wizard-line-error {
      background: $lv-wizard-error-background-color;
    }
  }

  .lv-wizard-vertical-line {
    position: absolute;
    width: 0.01rem;
    height: calc(100% - 0.28rem - 0.08rem);
    margin: 0.28rem 0 $margin-sm 0.1rem;
  }

  .lv-wizard-dot-line {
    margin-left: 0;
    margin-right: 0;
  }
}

// 横向标签
.lv-wizard-horizontal-label {
  .lv-wizard-step {
    display: flex;
    justify-content: flex-start;

    .lv-wizard-label {
      flex: 0 1 auto;
      margin-top: 0;
      margin-left: $margin-xs;
    }
  }
}

// 纵向布局
.lv-wizard-vertical {
  flex-direction: column;
  .lv-wizard-step {
    .lv-wizard-shape {
      > .lv-wizard-custom-shape {
        .lv-wizard-dot-icon {
          transform: rotate(90deg);
          margin-left: -0.1rem;
          width: 0.21rem;
          height: 0.2rem;
        }
        .lv-wizard-dot-start-icon {
          margin-top: 0.06rem;
        }
        .lv-wizard-dot-end-icon {
          margin-top: -0.04rem;
        }
      }
    }
    .lv-wizard-dot-line {
      height: calc(100% - 0.2rem);
      margin: 0.2rem 0 0.08rem 0;
    }
  }
}

.lv-wizard {
  .lv-wizard-step {
    .lv-wizard-label,
    .lv-wizard-vertical-label {
      margin-top: 0;
      margin-left: $margin-sm;
    }
  }
}

// 浅色风格
.lv-wizard-theme-light {
  color: $lv-wizard-light-text;

  .lv-wizard-step {
    .lv-wizard-shape {
      > .lv-wizard-step-number,
      > .lv-wizard-step-icon {
        background: $lv-wizard-light-wait-background-color;
        em.lv-wizard-step-default-icon {
          background: $lv-wizard-light-step-number-color;
        }
      }
    }

    .lv-wizard-label,
    ~ .lv-wizard-label {
      color: $lv-wizard-light-text;
    }

    &.lv-wizard-step-process {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-light-process-background-color;
        }
        .lv-wizard-dot-icon {
          color: $lv-wizard-light-process-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-light-text-progress;
      }
    }

    &.lv-wizard-step-finish {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-light-finish-background-color;
        }
        .lv-wizard-dot-icon {
          color: $lv-wizard-light-finish-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-light-text-light;
      }
    }

    &.lv-wizard-step-error {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-light-error-background-color;
          i {
            &.lv-step-error-icon {
              color: $lv-wizard-light-step-error-icon-color;
            }
          }
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-light-text-error;
      }
    }
  }

  .lv-wizard-line {
    background: $lv-wizard-light-wait-background-color;

    &.lv-wizard-line-process {
      background: $lv-wizard-light-process-background-color;
    }

    &.lv-wizard-line-finish {
      background: $lv-wizard-light-finish-background-color;
    }

    &.lv-wizard-line-error {
      background: $lv-wizard-light-error-background-color;
    }
  }

  .lv-wizard-step-label .lv-wizard-description {
    color: $lv-wizard-light-description;
  }
}

// 深色风格
.lv-wizard-theme-dark {
  color: $lv-wizard-dark-text;

  .lv-wizard-step {
    .lv-wizard-shape {
      > .lv-wizard-step-number,
      > .lv-wizard-step-icon {
        background: $lv-wizard-dark-wait-background-color;
        em.lv-wizard-step-default-icon {
          background: $lv-wizard-dark-step-number-color;
        }
      }
    }

    .lv-wizard-label,
    ~ .lv-wizard-label {
      color: $lv-wizard-dark-text-wait;
    }

    &.lv-wizard-step-process {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-dark-process-background-color;
          em.lv-wizard-step-default-icon {
            background: $lv-wizard-light-step-number-color;
          }
        }
        .lv-wizard-dot-icon {
          color: $lv-wizard-dark-process-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-dark-text-progress;
      }
    }

    &.lv-wizard-step-finish {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-dark-finish-background-color;
        }
        .lv-wizard-dot-icon {
          color: $lv-wizard-dark-finish-background-color;
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-dark-text-light;
      }
    }

    &.lv-wizard-step-error {
      .lv-wizard-shape {
        > .lv-wizard-step-number,
        > .lv-wizard-step-icon {
          background: $lv-wizard-dark-error-background-color;
          i.lv-step-error-icon {
            color: $lv-wizard-dark-step-error-icon-color;
          }
        }
      }

      .lv-wizard-label,
      ~ .lv-wizard-label {
        color: $lv-wizard-dark-text-error;
      }
    }
  }

  .lv-wizard-line {
    background: $lv-wizard-dark-wait-background-color;

    &.lv-wizard-line-process {
      background: $lv-wizard-dark-process-background-color;
    }

    &.lv-wizard-line-finish {
      background: $lv-wizard-dark-finish-background-color;
    }

    &.lv-wizard-line-error {
      background: $lv-wizard-dark-error-background-color;
    }
  }

  .lv-wizard-step-label .lv-wizard-description {
    color: $lv-wizard-dark-description;
  }
}

// 可点击
.lv-wizard-can-click {
  .lv-wizard-step-label:hover .lv-wizard-label {
    &:not(&-readonly) {
      color: $lv-wizard-text-hover;
    }
  }
}
